<template>
	<view class="conter">
		<!-- <HeadNavs :title="'设置安全密码'"></HeadNavs> -->
		<view class="bbmons">
			<view class="container">
				<!-- 头像 -->

				<!-- 昵称 -->
				<view class="box1">
					<view class="">手机号</view>
					<view class="name">
						<u--input color="#fff" placeholder="请输入手机号" border="none" inputAlign="right"
							v-model="loginForm.phone"></u--input>
					</view>
				</view>
				<!-- 登录密码 -->
				<view class="box1">
					<!-- <view class="">设置安全密码</view> -->
					<view class="name">
						<u--input color="#fff" placeholder="请输入验证码" border="none" inputAlign="left"
							v-model="code"></u--input>
					</view>
					<!-- <view class="code" @click="getcode">获取验证码</view> -->
					<text class="code" v-if="phoneCodeStatus" @click="getcode">获取验证码</text>
					<span v-else>重发({{ phoneCodeTime }}s)</span>
				</view>
				<!-- 绑定手机号 -->
				<view class="box1">
					<view class="">确认密码</view>
					<view class="name">
						<u--input color="#fff" maxlength="6" placeholder="请输入6位安全密码" inputAlign="right" border="none"
							v-model="password"></u--input>
					</view>
				</view>
			</view>
			<u-popup bgColor='transparent' class="u-popup" :show="show" mode="center" @close="closePopupCode"
				:closeable="true">
				<view class="popup_box">
					<view class="input-item flex align-center" style="width: 50%" v-if="captchaEnabled">
						<view class="iconfont icon-code icon"></view>
						<input v-model="imgcode" class="input" placeholder="请输入图形码" maxlength="5" />
						<view class="login-code">
							<image :src="codeUrl" @click="getCode" class="login-code-img"></image>
						</view>
					</view>
					<button @click="confirmCode" class="confirm-txt">确定</button>
				</view>
			</u-popup>
			<view class="confirm-btn" @click="confirmSafeCode">确认</view>
		</view>
	</view>
</template>

<script>
	import {
		getCodeImg,
		verification
	} from '@/api/login';
	import {
		updateTransactionPassword
	} from '@/api/account/account.js';
	import {
		v4 as uuidv4
	} from 'uuid';
	import {
		getUserAdmin
	} from '@/utils/auth';
	import {
		toast
	} from '../../../utils/common';
	export default {
		data() {
			return {
				captchaEnabled: true,
				code: '',
				password: '',
				loginForm: {
					phone: '',
					uuid: ''
				},
				phoneCodeStatus: true, //发送验证码状态
				phoneShow: false,
				phoneCodeTime: 60,
				show: false,
				imgcode: '',
				codeUrl: ''
			};
		},
		created() {
			this.getUserDetail();
			this.getCode();
		},
		methods: {
			closePopupCode() {
				this.show = false;
				this.imgcode = '';
			},
			getcode() {
				if (this.loginForm.phone !== '') {
					this.show = true;
				} else {
					toast('请先输入手机号');
				}
			},
			async getCode() {
				let uuid = uuidv4();
				const data = await getCodeImg(uuid);
				// 将ArrayBuffer转换成Uint8Array
				const uint8Array = new Uint8Array(data);
				// 将Uint8Array转换成Base64
				const base64 = btoa(String.fromCharCode.apply(null, uint8Array));
				// 构建Data URL
				const dataUrl = `data:image/jpeg;base64,${base64}`;
				// 将Data URL 设置为图片的src属性
				this.codeUrl = dataUrl;
				this.loginForm.uuid = uuid;

				// let uuid = uuidv4();
				// getCodeImg(uuid).then((res) => {
				// 	const url = window.URL.createObjectURL(new Blob([res]));
				// 	this.codeUrl = url;
				// 	this.loginForm.uuid = uuid;
				// });
			},
			confirmCode() {
				verification(this.loginForm, this.imgcode).then((res) => {
					this.show = false;
					this.startTime();
				});
			},
			// 倒计时
			startTime() {
				this.phoneCodeTime = 60;
				this.phoneCodeStatus = false;
				if (this.interval) {
					clearInterval(this.interval);
				}
				this.interval = setInterval(() => {
					// 使用箭头函数
					this.phoneCodeTime = this.phoneCodeTime - 1;
					if (this.phoneCodeTime < 1) {
						this.phoneCodeStatus = true;
						clearInterval(this.interval);
					}
				}, 1000);
			},
			getUserDetail() {
				let detail = getUserAdmin();
				if (detail) {
					this.loginForm.phone = detail.phone;
				} else {
					//不为真的情况需要调用获取用户信息接口,存储完之后再次调用自己
					this.refreshUserInfo();
				}
			},
			async confirmSafeCode() {
				let passwordReg = /[^a-zA-Z0-9@.]$/g;
				if (this.loginForm.phone == '') {
					toast('请先输入手机号');
				} else if (this.code == '') {
					toast('您还没输入验证码');
				} else if (this.password == '') {
					toast('您还没输入安全密码');
				} else if (this.password.length < 6) {
					toast('密码必须为6位');
				} else {
					let param = {};
					param.phone = this.loginForm.phone;
					param.transactionPassword = this.password;
					param.verificationCode = this.code;
					const res = await updateTransactionPassword(param);
					// console.log(res, 'res');
					if (res.code == 200) {
						this.$modal.showToast('设置成功')
					}
				}
			}
		}
	};
</script>

<style lang="scss" scoped>
	::v-deep .u-popup__content {
		background: none;
		border-radius: 24rpx;
	}

	::v-deep .u-popup__content {
		border-radius: 20rpx;
	}

	.u-popup {
		background: none;
	}

	.name {
		width: 300rpx;
		display: flex;
		opacity: 1;
		position: relative;
	}

	.box {
		border-bottom: none !important;
	}

	.code {
		color: #46A6F8 ;
	}

	.box1 {
		width: 680rpx;
		height: 110rpx;
		border-bottom: 1rpx solid #282c34;
		text-align: center;
		line-height: 70rpx;
		margin: 0 34rpx;
		// background-color: pink;
		display: flex;
		font-size: 28rpx;
		font-family: 'font';
		font-weight: 400;
		color: #ffffff;
		justify-content: space-between;
		padding: 20rpx 30rpx;
	}

	.popup_box {
		width: 600rpx;
		height: 400rpx;
		background: #24282d;
		border-radius: 20rpx;

		.confirm-txt {
			width: 200rpx;
			height: 70rpx;
			color: #fff;
			font-size: 28rpx;
			font-family: 'font';
			font-weight: 400;
			background: linear-gradient(270deg, #4463FF 0%, #3ADDEB 100%);
			box-shadow: 3rpx 3rpx 5rpx 0rpx rgba(0, 0, 0, 0.15);
			border-radius: 14rpx 14rpx 14rpx 14rpx;
			opacity: 1;
		}

		.input-item {
			margin: 100rpx 30rpx;
			background: #0d0e12;
			box-shadow: 3rpx 3rpx 5rpx 0rpx rgba(0, 0, 0, 0.15);
			border-radius: 14rpx 14rpx 14rpx 14rpx;
			opacity: 1;
			border: 2rpx solid #3c424d;
			color: #ffffff;

			.icon {
				font-size: 38rpx;
				margin-left: 10px;
				color: #999;
			}

			.input {
				width: 100%;
				font-size: 14px;
				line-height: 20px;
				text-align: left;
				padding-left: 15px;
			}
		}

		.login-code {
			height: 38px;
			border-radius: 14rpx;
			float: right;

			.login-code-img {
				height: 38px;
				position: absolute;
				margin-left: 10px;
				width: 200rpx;
				border-radius: 14rpx;
			}
		}
	}

	.confirm-btn {
		width: 680rpx;
		height: 77rpx;
		background: linear-gradient(270deg, #4463FF 0%, #3ADDEB 100%);
		box-shadow: 3rpx 3rpx 5rpx 0rpx rgba(0, 0, 0, 0.15);
		border-radius: 14rpx;
		opacity: 1;
		margin: 310rpx 34.88rpx;
		text-align: center;
		line-height: 77rpx;
		font-size: 28rpx;
		font-family: 'font';
		font-weight: 800;
		color: #ffffff;
	}
</style>